import React, { Component } from 'react';
import { Stepper } from 'antd-mobile'
import './Footer.scss'
class Footer extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            showCarts:false
        }
    }


    maskControl = (status) =>{
        this.setState({
            showCarts:status
        })
    }

    submit = () =>{
        if(this.props.sellerData.minPrice < this.getCartsDetail().price){
            React.$toast.show({
                icon: 'success',
                content: `您需要支付餐费${this.getCartsDetail().price}元(不含配送费)`
            })
        }else{
            React.$toast.show({
                icon: `fail`,
                content: '所选商品总价不足起送费',
            })
        }
    }
    
    //获取购物车列表
    getCarts = () =>{
        let foodsData = this.props.foodsData
        let resultTmp = []
        foodsData.forEach(el=>{
            el.foods.forEach(target=>{
                if(target.count != 0){
                    resultTmp.push(target)
                } 
            })
        })
        return resultTmp
    }
    //获取购物车的详情
    getCartsDetail = () =>{
        let resultTmp = this.getCarts()
        let count = 0 //购物车现在的商品总数
        let price = 0 //现在的总价格
        //计算购物车的信息
        resultTmp.forEach(el=>{
            count += el.count
            price += el.price  * el.count
        })
        //计算配送的文字
        let deliveryText = ''
        let minprice = this.props.sellerData.minPrice
        if(price != 0){
            if(price < minprice){
                deliveryText = `还差￥${Number(minprice) - Number(price)}起送`
            }else{
                deliveryText = `提交订单`
            }
        }else{
            deliveryText = `￥${minprice}起送`
        }


        return {
            count,
            price,
            deliveryText
        }
    }

    clear = () =>{
        this.props.clearShopCart()
        this.maskControl(false)
    }

    render() { 
        return ( 
            <div className="shopping-cart">
                <div className={`Footer ${this.state.showCarts ?'showCarts':''}`}>
                    <div className="statistical" onClick={()=>{this.maskControl(true)}}>
                        <div className="icon">
                            <div className={`circle ${this.getCarts().length?'circle-light':''}`}>
                                <div className="inside-circle">
                                    <span className="logo icon-shopping_cart"></span>
                                </div>
                            </div>
                            {
                                this.getCartsDetail().count > 0?
                                <div className="anchor">{this.getCartsDetail().count}</div>
                                :''
                            }
                            
                        </div>
                        <div className={`price ${ 0 < this.getCartsDetail().price ? 'active_price' :''}`}>
                            ￥{this.getCartsDetail().price}
                        </div>
                        <div className="division"></div>
                        <div className="delivery-cost">
                            另需配送费￥{this.props.sellerData.deliveryPrice}元
                        </div>
                    </div>
                    <div className={`submit ${this.props.sellerData.minPrice > this.getCartsDetail().price ? '' :'can_submit'}`} onClick={(e)=>{this.submit()}} >
                        {this.getCartsDetail().deliveryText}
                    </div>
                </div>
                {this.state.showCarts == true ?
                    <div className="mask"  onClick={()=>{this.maskControl(false)}}>
                        <div className="content" onClick={(e)=>{e.stopPropagation()}}>
                            <div className="title">
                                <div className="key">购物车</div>
                                <div className="command" onClick={()=>{this.clear()}}>清空</div>
                            </div>
                            <div className="list">
                                {this.getCarts().length?this.getCarts().map((el,index)=>{
                                    return (
                                        <div className="item" key={index}>
                                            <div className="food-name">{el.name}</div>
                                            <div className="price">
                                                <span className="fee-icon">￥</span>
                                                {el.price}
                                            </div>
                                            <div className="counter">
                                                    <Stepper
                                                        style={{    
                                                            '--border-inner': 'none',
                                                            '--button-background-color': '#F8F9FA',
                                                            '--height': '1.5rem',
                                                            '--active-border': '1px solid #1677ff',
                                                        }}
                                                        min={0}
                                                        value={el.count}
                                                        onChange={value => {
  
                                                            this.props.setCount(el.listIndex,el.foodsIndex,value)
                                                        }}
                                                    />

                                            </div>
                                        </div>
                                    )
                                }):<h1 className="nomore">这里什么都没有哦，请去菜单添加美食!</h1>}
                            </div>
                        </div>
                    </div>
                    :''
                }      
            </div>         
         );
    }
}
 
export default Footer;